<template>
	<view class="page">
		<view class="coupon-cont-list">
			<view class="coupon-cont-list-item" v-for="(item,index) in rewardList" :key="index">
				<view class="coupon-cont-list-item-no">NO: {{item.coupon_no}}</view>
				<view class="coupon-cont-list-item-info flex">
					<view class="coupon-cont-list-item-info-left flex">
						<image class="coupon-cont-list-item-info-pack" src="../../../static/icons/redpacket.png"></image>
						<view>
							<view class="coupon-cont-list-item-info-money">￥{{item.amount}}</view>
							<view class="coupon-cont-list-item-info-time">有效期:{{item.expired_time_text}}</view>
						</view>
					</view>
					<view class="coupon-cont-list-item-info-num">{{item.state_text}}</view>
				</view>
			</view>
			<mix-load-more :status="loadMoreStatus"></mix-load-more>
		</view>
	</view>
</template>
<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				showLoading: false,
				rewardList:[],
				couponNum:0,
				coupon_no:'',
				member_id:'',
				page:1,
				total_pages:1,
				loadMoreStatus:0,
			};
		},
        methods: {
			getData(type){
				let that = this
				that.loadMoreStatus = 1
				if(that.page <= that.total_pages){
					jewel.get('Maker/coupon_list',{},true,function(res){
						if(res.data.data.length === 0) that.loadMoreStatus = 2
						if(type == 'more'){
							that.rewardList = that.rewardList.concat(res.data.data)
						}else{
							that.rewardList = res.data.data
							that.total_pages = res.data.total_pages
							that.loadMoreStatus = that.total_pages == 1||that.total_pages == 0?2:0
						}
					});
				}else{
					that.loadMoreStatus = 2
				}
			}
        },
        onLoad() {
			this.getData()
        },
		onReachBottom() {
			this.page++
			this.getData('more')
		}
	}
</script>
<style lang="scss">
	.flex{
		display: flex;
	}
	.page{
		background-color: #f4f4f4;
		.coupon-cont{
			position: relative;
			z-index: 2;
			&-title{
				justify-content: space-between;
				align-items: center;
				padding: 34rpx 38rpx 26rpx 42rpx;
				box-sizing: border-box;
				&-icon{
					width: 42rpx;
					height: 42rpx;
					margin-right: 14rpx;
				}
				&-text{
					color: #000000;
					font-size: 36rpx;
				}
				&-all{
					color: #7f7f7f;
					font-size: 28rpx;
				}
			}
			&-list{
				&-item{
					width: 700rpx;
					height: 194rpx;
					margin: 0 auto;
					background-color: #FFFFFF;
					border-radius: 5px;
					box-shadow:0px 0px 29rpx rgba(214,214,214,0.24);
					overflow: hidden;
					margin-top: 20rpx;
					&-no{
						text-align: left;
						color: #4e4e4e;
						font-size: 26rpx;
						border-bottom: 1px solid #e6e6e6;
						line-height: 56rpx;
						padding-top: 6rpx;
						padding-left: 20rpx;
					}
					&-red{
						color: #d71511;
						font-size: 26rpx;
						margin: 0 30rpx 0 18rpx;
					}
					&-info{
						justify-content: space-between;
						align-items: center;
						height: 130rpx;
						&-left{
							align-items: center;
							margin-left: 40rpx;
						}
						&-pack{
							width: 63rpx;
							height: 72rpx;
							display: block;
							margin-right: 22rpx;
						}
						&-money{
							color: #353535;
							font-size: 41rpx;
						}
						&-time{
							color: #333333;
							font-size: 28rpx;
						}
						&-num{
							color: #d71511;
							font-size: 33rpx;
							margin-right: 32rpx;
							text{
								font-size: 62rpx;
							}
						}
					}
				}
			}
			&-give{
				margin-top: 70rpx;
				&-title{
					align-items: center;
					color: #000000;
					font-size: 36rpx;
					padding-left: 43rpx;
					&-icon{
						width: 41rpx;
						height: 34rpx;
						margin-right: 15rpx;
					}
				}
				&-item{
					color: #000000;
					&-name{
						font-size: 34rpx;
					}
					&-first{
						border-bottom: 1px solid #eaeaea;
						height: 82rpx;
						align-items: center;
						width: 700rpx;
						margin: 0 auto;
						padding-left: 20rpx;
						box-sizing: border-box;
					}
					&-idinput{
						margin-left: 28rpx;
					}
					&-second{
						margin-left: 42rpx;
						.name{
							line-height: 96rpx;
						}
					}
					&-noinput{
						background-color: #eaeaea;
						border-radius: 5px;
						width: 614rpx;
						padding: 15rpx 25rpx;
						font-size: 26rpx;
					}
				}
			}
		}
	}
	
</style>
